<template>
  <div class="file_card_box">
    <div
        class="file_card"
        v-for="(item, index) in List"
        :key="index"
        @click="view(item)"
    >
      <div class="card">
        <div
            class="card_action_btn card_action_right"
            @click.stop="handlerMenu(index)"
        >
          <span class="card_action_list">···</span>
        </div>
        <div class="context_click_menu" v-if="showFileMenu === index">
          <ul class="context_dropdown_menu">
<!--            <li class="context_dropdown_menu_item" @click.stop="removetob(item)">-->
<!--              <div class="context_dropdown_menu_item_text">恢复至备份盘</div>-->
<!--            </li>-->
<!--            <li class="context_dropdown_menu_item" @click.stop="removeto(item)">-->
<!--              <div class="context_dropdown_menu_item_text">恢复至资源库</div>-->
<!--            </li>-->
<!--            <li-->
<!--                style="-->
<!--                background-color: rgb(132, 133, 141, 0.08);-->
<!--                height: 1px;-->
<!--                margin: 4px 8px;-->
<!--              "-->
<!--            ></li>-->
            <li class="context_dropdown_menu_item warn" @click.stop="deleteOpen(item)">
              <div class="context_dropdown_menu_item_text warn1">
                删除
              </div>
            </li>
          </ul>
        </div>
        <div
            class="node_card"
            @mouseover="showButtons = true"
            @mouseout="showButtons = false"
        >
          <div class="folder_cover">
            <img
                v-if="item.type === 'jpg' || item.type === 'png'"
                style="width: 115px; height: 90px"
                :src="item.fileUrl"
                alt=""
            />
            <img
                v-else
                style="width: 115px; height: 90px"
                :src="typeList[item.type]"
                alt=""
            />
          </div>
          <div class="card_text">
            <p class="card_title">{{ item.name }}</p>
            <p class="card_time">{{ item.createTime }}</p>
          </div>
        </div>
      </div>
    </div>

    <div>
      <el-dialog
          title="预览"
          :visible.sync="dialogVisible"
          width="90%"
          top="5vh"
      >
        <div class="el-dialog-div">
          <iframe
              :src="this.viewUrl"
              style="width: 100%; height: 100%"
          ></iframe>
        </div>
      </el-dialog>
    </div>

  </div>
</template>

<script>
import {mapMutations} from "vuex";
import {typeList} from "@/components/FileCard/icon";
import {getList,view,deleteby} from "@/api/collect";
export default {
  data() {
    return {
      newFile_input: "新建文件夹",
      overlay: false,
      filterList: true,
      tagText: "",
      isBasicActive: true,
      isSmartActive: false,
      showMenu: false,
      showFileMenu: false,
      listSum: 1, //列表中文件数量
      menuX: 0, // 菜单的水平位置
      menuY: 0, // 菜单的垂直位置
      dialogNewFile: false,
      typeList,
      List:[],
      viewUrl:"",
      dialogVisible:false
    };
  },
  created() {
    this.get()
  },
  methods: {
    ...mapMutations("file", [
      "pushResource",
      "pushFolderList",
      "deleteFolderList",
      "deleteResource",
      "deleteResourceList",
      "pushResourceList",
      "pushRecycleList",
      "deleteRecycleList"
    ]),
    // 刷新
    get(){
      getList().then(res => {
        this.List = res.data
      })
    },
    // 删除
    deleteOpen(item){
      deleteby(item.id).then(res => {
        if (res.code === 200){
          this.$message.success("删除成功")
          this.get()
        }
      })
    },
    // 预览
    view(item){
      this.dialogVisible = true
      view(item.id).then(res => {
        this.viewUrl = res.data.viewUrl
      })
    },

    handlerMenu(index) {
      console.log("-----------handlerMenu-----------", index);
      this.showFileMenu = index;
    },
    // 点击空白处隐藏菜单
    handleRootClick() {
      this.showFileMenu = undefined;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
          .then((_) => {
            done();
          })
          .catch((_) => {
          });
    },
  },



  watch: {},
  mounted() {
    // 获取根元素的DOM节点
    const rootElement = document.querySelector(".app-wrapper");

    // 添加click事件监听器
    rootElement.addEventListener("click", this.handleRootClick);
  },
  beforeDestroy() {
    // 在组件销毁前移除事件监听器，以避免内存泄漏
    const rootElement = document.querySelector(".app-wrapper");
    rootElement.removeEventListener("click", this.handleRootClick);
  },

};

</script>

<style lang="scss" scoped>
.el-dialog-div {
//margin-top: 10px;
  height: 75vh; //如果高度过高，可用max-height
overflow: auto;
}

.file_card_box {
  display: flex;
  flex-wrap: wrap;

.file_card {
  width: 155px;
  height: 207px;
  display: flex;
  justify-content: center;

.card {
  width: 123px;
  position: relative;

.node_card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: 10px;
  padding: 8px 0 10px;

&:hover {
   background-color: rgb(132, 133, 141, 0.08);
 }

.folder_cover {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
}

.card_text {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

p {
  width: 100%;
  text-align: center;
}

.card_title {
  font-size: 14px;
  color: rgb(37, 38, 43);
  line-height: 1.5;
  margin: 0;
  margin-bottom: 2px;
  text-overflow: ellipsis;
  overflow: hidden;
}

.card_time {
  font-size: 12px;
  color: rgb(37, 38, 43, 0.36);
  margin: 0;
}
}
}

.card_action_btn {
  width: 24px;
  height: 24px;
  border-radius: 3px;
  background-color: #fff;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;

.card_action_list {
  font-weight: 500;
  line-height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(37, 38, 43, 0.36);
}

//&:hover {
   //  color: rgba(10, 10, 10);
   //}
}

.card_action_btn.hidden {
  display: none;
}

.card_action_left {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 2;
}

.context_click_menu {
  width: 160px;
  padding: 4px;
  background-color: #fff;
  position: absolute;
  top: 34px;
  left: 96px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 100;

.context_dropdown_menu {
  width: 152px;
  list-style: none;
  padding: 0;
  margin: 0;

.context_dropdown_menu_item {
  display: flex;
  height: 36px;
  align-items: center;
  border-radius: 5px;
  width: 100%;

.context_dropdown_menu_item_text {
  color: rgb(37, 38, 43);
  font-size: 14px;
  padding: 0 8px;
  font-family: Helvetica Neue, Helvetica, PingFang SC,
  Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}

.context_dropdown_menu_item_text.warn1 {
  color: rgb(255, 111, 102);
}
}

.context_dropdown_menu_item:hover {
  background-color: rgb(132, 133, 141, 0.08);
}

.context_dropdown_menu_item.warn:hover {
  background-color: rgb(243, 91, 81, 0.12);
}
}
}

.card_action_right {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 2;
}

.node_card.active {
  background-color: rgb(132, 133, 141, 0.08);
}
}
}
}
</style>
